<template>
    <div class="detail-wrapper">
      <el-dialog
        title="过磅单详情"
        class="tableDialog"
        :visible.sync="detailVisible">
        <div style="text-align: center">
          <p class="title">过磅单号:{{this.viewForm.weightCode}}<span class="status" v-if="this.viewForm.transport.state">({{$dictUtils.getDictLabel("transState", this.viewForm.transport.state, "")}})</span></p>
        </div>

        <div class="detail">
          <p class="detail-title">业务及车辆信息</p>
          <table class="detail-table business-table" cellspacing="0" cellpadding="0">
            <tr>
              <td class="label-container">业务编号</td>
              <td class="form-container"><span v-if="viewForm.business !== undefined">{{this.viewForm.business.codes}}</span></td>
              <td class="label-container">数据类别</td>
              <td class="form-container">{{$dictUtils.getDictLabel("dataType", this.viewForm.business.dataType, "")}}</td>
            </tr>
            <tr>
              <td class="label-container">发运计划</td>
              <td class="form-container"><span v-if="viewForm.transportPlan!==undefined">{{this.viewForm.transportPlan.planCode}}</span></td>
              <td class="label-container">客户/供应商名称</td>
              <td class="form-container"><span v-if="viewForm.business !==undefined">{{this.viewForm.business.companyName}}</span></td>
            </tr>
            <tr>
              <td class="label-container">货物</td>
              <td class="form-container"><span v-if="viewForm.product!==undefined">{{this.viewForm.product.name}}</span></td>
              <td class="label-container">货物单价</td>
              <td class="form-container price">
                <span><span v-if="this.viewForm.price">{{this.viewForm.price}}</span><span v-else>0</span></span>
                <span v-if="this.viewForm.payMode">({{$dictUtils.getDictLabel("payMode", this.viewForm.payMode, "")}})</span><el-checkbox v-model="viewForm.isFreight" :disabled="true">含运费</el-checkbox>
              </td>
            </tr>
            <tr>
              <td class="label-container">车牌号</td>
              <td class="form-container"><span v-if="viewForm.transport!==undefined">{{this.viewForm.transport.truckNumber}}</span><span style="margin-left: 5px" v-if="viewForm.axle!==undefined">{{this.viewForm.axle.axle}}</span></td>
              <td class="label-container">司机</td>
              <td class="form-container">
                <span v-if="viewForm.truckDriver!==undefined">
                  <span>{{this.viewForm.truckDriver.name}}</span><span style="margin-left: 5px">{{this.viewForm.truckDriver.phone}}</span>
                </span>
              </td>
              <!--              <td class="label-container">车轴类型</td>-->
              <!--              <td class="form-container"><span v-if="viewForm.axle!==undefined">{{this.viewForm.axle.axle}}</span></td>-->
            </tr>
<!--            <tr>-->
<!--              <td class="label-container">司机姓名</td>-->
<!--              <td class="form-container"><span v-if="viewForm.truckDriver!==undefined">{{this.viewForm.truckDriver.name}}</span></td>-->
<!--              <td class="label-container">司机电话</td>-->
<!--              <td class="form-container"><span v-if="viewForm.truckDriver!==undefined">{{this.viewForm.truckDriver.phone}}</span></td>-->
<!--            </tr>-->
          </table>
        </div>
        <div class="detail">
          <p class="detail-title">重量信息（单位:吨）</p>
          <table class="detail-table" cellspacing="0" cellpadding="0">
            <tr>
              <td class="label-container">毛重</td>
              <td class="form-container"><span v-if="viewForm.gross!==undefined">{{this.viewForm.gross.weightMeasured}}</span></td>
              <td class="label-container">皮重</td>
              <td class="form-container"><span v-if="viewForm.tare!==undefined">{{this.viewForm.tare.weightMeasured}}</span></td>
              <td class="label-container">净重</td>
              <td class="form-container">{{this.viewForm.netWeightMeasured}}</td>
            </tr>
            <tr>
              <td class="label-container">暗扣</td>
              <td class="form-container">{{this.viewForm.deductWeight}}</td>
              <td class="label-container">扣杂</td>
              <td class="form-container">{{this.viewForm.deductWeightImpurity}}</td>
              <td class="label-container">扣水</td>
              <td class="form-container">{{this.viewForm.deductWeightWater}}</td>
            </tr>
            <tr>
              <td class="label-container">超载调整</td>
              <td class="form-container">{{this.viewForm.overloadAdjustWeight}}</td>
              <td class="label-container">毛重(调整)</td>
              <td class="form-container">{{this.viewForm.weightGross}}</td>
              <td class="label-container">皮重(调整)</td>
              <td class="form-container">{{this.viewForm.weightTare}}</td>
            </tr>
            <tr>
              <td class="label-container">净重(调整)</td>
              <td class="form-container">{{this.viewForm.netWeight}}</td>
              <td class="label-container">标载</td>
              <td class="form-container"><span v-if="viewForm.axle!==undefined">{{this.viewForm.axle.maxGross}}</span></td>
              <td class="label-container">超载</td>
              <td class="form-container">{{this.viewForm.overloadWeight}}</td>
            </tr>
            <tr>
              <td class="label-container">原发数</td>
              <td class="form-container">{{this.viewForm.originalWeight}}</td>
              <td class="label-container">合理路耗</td>
              <td class="form-container">{{this.viewForm.allowLossWeight}}</td>
              <td class="label-container">路耗</td>
              <td class="form-container">{{this.viewForm.lossWeight}}</td>
            </tr>
          </table>
        </div>
        <div class="detail">
          <p class="detail-title">其他信息</p>
          <table class="detail-table" cellspacing="0" cellpadding="0">
            <tr>
              <td class="label-container">皮重时间</td>
              <td class="form-container"><span v-if="viewForm.tare!==undefined">{{this.viewForm.tare.weightTime}}</span></td>
              <td class="label-container">皮重磅房</td>
              <td class="form-container"><span v-if="viewForm.tareRoom!==undefined">{{this.viewForm.tareRoom.name}}</span></td>
              <td class="label-container">皮重设备</td>
              <td class="form-container"><span v-if="viewForm.tareEquip!==undefined">{{this.viewForm.tareEquip.outerCode}}</span></td>
            </tr>
            <tr>
              <td class="label-container">毛重时间</td>
              <td class="form-container"><span v-if="viewForm.gross!==undefined">{{this.viewForm.gross.weightTime}}</span></td>
              <td class="label-container">毛重磅房</td>
              <td class="form-container"><span v-if="viewForm.grossRoom!==undefined">{{this.viewForm.grossRoom.name}}</span></td>
              <td class="label-container">毛重设备</td>
              <td class="form-container"><span v-if="viewForm.grossEquip!==undefined">{{this.viewForm.grossEquip.outerCode}}</span></td>
            </tr>
            <tr>
              <td class="label-container">仓库确认</td>
              <td class="form-container"><span v-if="viewForm.warehouse!==undefined">{{this.viewForm.warehouse.warehouseComfirmTime}}</span></td>
              <td class="label-container">仓库名称</td>
              <td class="form-container"><span v-if="viewForm.warehouse!==undefined">{{this.viewForm.warehouse.warehouseName}}</span></td>
              <td class="label-container">保管/收料</td>
              <td class="form-container"><span v-if="viewForm.warehouse!==undefined">{{this.viewForm.warehouse.warehouseUserName}}</span></td>
            </tr>
            <tr>
              <td class="label-container">原发时间</td>
              <td class="form-container">{{this.viewForm.originalDate | noValue}}</td>
              <td class="label-container">磁卡卡面号</td>
              <td class="form-container"><span v-if="viewForm.card !== undefined">{{this.viewForm.card.cardNumber}}</span></td>
              <td class="label-container"></td>
              <td class="form-container"></td>
            </tr>
          </table>
        </div>
      </el-dialog>
    </div>
</template>

<script>
    export default {
      name: 'Details',
      data () {
        return {
          detailVisible: false,
          viewForm: {
            isFreight: '',
            card: {
              cardNumber: ''
            },
            transport: {
              state: ''
            },
            business: {
              codes: ''
            },
            warehouse: {
              warehouseComfirmTime: '',
              warehouseName: '',
              warehouseUserName: ''
            },
            lossWeight: '',
            netWeightMeasured: '',
            weightGross: '',
            netWeight: '',
            overloadWeight: ''
          }
        }
      },
      methods: {
        init (method, viewForm) {
          if (method === 'view') {
            this.detailVisible = true
            this.viewForm = viewForm
          }
        }
      }
    }
</script>

<style lang="scss" scoped>
  @import "@/assets/scss/config.scss";
  .detail-wrapper{
    ::v-deep.el-dialog{
      .el-dialog__body{
        .title{
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
          .status{
            color: $--color-primary-liyu;
          }
        }
        .detail:last-child{
          .detail-table{
            margin-bottom: 0;
          }
        }
        .detail-title{
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
          margin-bottom: 10px;
        }
        .detail-table{
          margin-bottom: 20px;
          .label-container{
            width: 135px;
          }
          .form-container{
            width: 210px;
          }
          &.business-table{
            .form-container{
              width: 383px;
              &.price{
                .el-checkbox{
                  margin-left: 15px;
                }
              }
            }

          }
        }
      }
    }

  }
</style>
